Of Stack

Javascript validation upload image size [foreground processing]

  • 2020-03-30 03:33:49
  • OfStack

Demand analysis:

When uploading pictures, if you do not limit the size of the uploaded pictures, the consequences are very serious. So how can we solve a tough problem? There are two ways:
1) background processing: that is, AJAX POST submits to the background, uploads the image to the server, and then obtains the image size for processing.
2) foreground processing: that is, using Javascript to get the size of the image.
Obviously the first way is bad. Because the need to upload the file to the server first, if the file is large, in addition to the network is not very fast, need to wait a long time, palliative not cure.

Function analysis:

Here I will only introduce the different approaches of Internet explorer and FireFox.
IE6:
Keyword: fileSize onreadystatechange complete
The fileSize can be obtained in IE6 from the fileSize property of the Img object, but the correct value for this fileSize property is set in the complete onreadystatechange event, i.e 


<img src="" class="img" 
onreadystatechange="Javascript:sizeCheck(this);"> 
function sizeCheck(img) { 

if(img.readyState == "complete") { 
alert(img.fileSize); 
} 
}

FireFox3.0:
Keyword: getAsDataURL() fileSize
For security reasons in FireFox, you cannot get the full path to the uploaded image, only the image name. However, the browser provides an nsIDOMFile interface, so you need to get the processed path through getAsDataURL(), but this path does not affect the image SRC display.
NsIDOMFile interface: 


DOMString getAsBinary(); 
DOMString getAsDataURL(); 
DOMString getAsText(in DOMString encoding); 


<input type="file" name="uploadImg" 
onchange="Javascript:checkFileChange(this);" 
size="12"/> 
function checkFileChange(obj) { 
var img = document.getElementById("img"); 
img.src = obj.files[0].getAsDataUrl(); 
alert(obj.files[0].fileSize); 
}

These are two different browsers, so how do you merge them? I will post the small examples I made below, in which I use JQuery to facilitate and get objects 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="lib/jquery-1.3.2.min.js" ></script> 
<title> Check the size of the uploaded image </title> 
<style type="text/css"> 
.img {width:136px;height:102px;} 
.imgError{border:3px solid red;} 
</style> 
<script type="text/javascript"> 
//Limit the uploaded image size to 100K
var MAXSIZE = 100 * 1024; 

//Image size limit information
var ERROR_IMGSIZE = " The image size cannot be exceeded 100K"; 
//The default image
var NOPHOTO = "imgs/nophoto.gif"; 

//Whether the picture is qualified
var isImg = true; 
 
function checkFileChange(obj) { 

//Initialization Settings
$(".imgTable").removeClass("imgError"); 
updateTips(""); 
var img = $(".img").get(0); 
var file = obj.value; 
var exp = /..jpg|..gif|..png|..bmp/i; 
if (exp.test(file)) {//Verify the format
if($.browser.msie) {//Whether it's IE or not
img.src = file; 
} else { 
img.src = obj.files[0].getAsDataURL(); 
sizeCheck(img); 
} 

} else { 
img.src = NOPHOTO; 
$(".imgTable").addClass("imgError"); 
updateTips(" The picture format is incorrect "); 
isImg = false; 
} 

} 
 
function sizeCheck(img) { 
//Initialization Settings
$(".imgTable").removeClass("imgError"); 
updateTips(""); 
if ($.browser.msie) {//Check if it's IE
if(img.readyState == "complete") { 
if (img.fileSize > MAXSIZE) { 
$(".imgTable").addClass("imgError"); 
updateTips(ERROR_IMGSIZE); 
isImg = false; 
}else { 
isImg = true; 
} 

}else { 
$(".imgTable").addClass("imgError"); 
updateTips(ERROR_IMGSIZE); 
isImg = false; 
} 

} else { 
var file = $("input:file[name='uploadImg']")[0]; 

if (file.files[0].fileSize > MAXSIZE) { 
$(".imgTable").addClass("imgError"); 
updateTips(ERROR_IMGSIZE); 
isImg = false; 
}else { 
isImg = true; 
} 

} 
} 

 
function updateTips(str) { 
$("p#errorTips").text(str); 
} 
 
function commit() { 

var isCommit = true; 
var usrname = $("input:text[name='usrname']"), 
email = $("input:text[name='email']"), 
img = $(".img"), 
file = $("input:file[name='uploadImg']"), 
frm = document.frm; 

isCommit = isCommit && isImg; 

if(isCommit) { 
frm.action = "about:blank"; 
frm.submit(); 
} 
} 
 
function errorImg(img) { 
img.src = NOPHOTO; 
} 

</script> 
</head> 
<body> 
<form name="frm" method="post"> 
<p id="errorTips"> </p> 
<table cellpadding="1" cellspacing="0" width="350px" border="1"> 
<tr> 
<td><label> Name: </label></td> 
<td><input type="text" name="usrname" maxlength="50"/></td> 
</tr> 
<tr> 
<td><label> Gender: </label></td> 
<td><input type="radio" name="sex" value="0"/> male <input type="radio" name="sex" value="0"/> female </td> 
</tr> 
<tr> 
<td><label> Email: </label></td> 
<td><input type="text" name="email" maxlength="100"/></td> 
</tr> 
<tr> 
<td><lable> image </label></td> 
<td> 
<table cellpadding="0" cellspacing="0" class="imgTable"> 
<tr> 
<td><img src="imgs/nophoto.gif" src="imgs/nophoto.gif" class="img" alt=" Head portrait " onerror="Javascript:errorImg(this);" 
onreadystatechange="Javascript:sizeCheck(this);"/> 
</td> 
</tr> 
<tr> 
<td><input type="file" name="uploadImg" onchange="Javascript:checkFileChange(this);" 
size="12"/></td> 
</tr> 
</table> 
</td> 
</tr> 
<tr> 
<td colspan="2"><a href="Javascript:commit();" rel="external nofollow" rel="external nofollow" href="Javascript:commit();" rel="external nofollow" rel="external nofollow" > registered </a></td> 
</tr> 
</table> 
</form> 
</body> 
</html>
Related articles: